
/**
    CSS (Cascading Style Sheet) 层叠样式表
    样式：对html页面进行美化的过程
    通俗的说 CSS就是美化页面的

    语法：
      选择器：确定要进行样式描述的标
        1.标签选择器
          在当前html中，所有的p标签都遵循这个样式规则
          p{}  a{}
        2.类选择器
          在当前html中，按照分类确定样式规则
          首先要在相应标签里添加 class的属性
          在css中对此class设置样式规则
          .类名{}
        3.id选择器
          在当前html中，按照id确定样式规则
          首先要在相应标签里添加 id的属性，id一般是唯一的
          在css中对此id设置样式规则
          #id名{}
        4.全局选择器
          对当前html中的所有标签统一做样式设定
          *{}
        5.组合选择器
          在当前html中，对标签的进一步确定可以组合使用其他选择器
          tr.first{}  tr.second{}  tr#id
          如果有多个选择器同时使用，可以使用逗号进行分割
          p,tr.奇数,#first{}
        6.继承选择器
          标签本身也是分层次的，这里的继承只是表示层次关系
          父标签 子标签{}
        7.伪类
          也是CSS的一种样式，但是不是作用在标签上，而是作用在标签的状态上
          比如：a标签  超链接状态：未连接 点击状态 已连接状态

      样式规则：在当前的选择器的标签下，对标签的样式进行控制。可以同时有多条规则

      选择器确定的标签{
        样式名称:具体值;
        样式名称:具体值;
        ...
      }

      a{
        width:200px;
        height:500px;
        background:red;
      }

   样式的使用方法
     1.内联样式
       直接在标签内部使用style属性来控制css的样式
     2.内部样式
       在当前html也中的head标签中设定css
     3.外部样式表
       如果样式的内容特别多，或者想要方便管理，可以把内部样式提出来单独形成一个css文件

   关于优先级
     如果同标签，同属性，下面的会覆盖掉原来的样式，可以加 !important 提高优先级
     如果同标签，即有id又有class id优先于class

   DIV布局
     div标签 + css样式 = DIV整体布局
     盒子模型 html中的所有的标签都是容器，容器也叫做盒子
     div也是一个标签，是存放页面区域划分的一个容器

     div:
       上下左右 边距
         当前div与其他标签的距离
       上下左右 边框
         当前div的四周的一个简单样式
       上下左右 补白
         当前div内部 内容与div的距离
       宽度和高度
         当前div的实际宽高
     页面元素的布局
       块级元素：单独成行    <p>
       行级元素：一行内可以并排摆放多个行内元素   <span>
       可以通过 display 属性对行级元素和块级元素进行互换
     CSS布局
       常规流
         按照标签顺序依次展示
       浮动
         相对于当前页面改变停放的位置 float
         清除浮动 不允许某个位置有浮动对象 clear
       定位
         1.static 无定位 默认值
         2.relative 相对定位 相对于自己本身原来的位置进行重新定位
         3.absolute 绝对定位 相对于父级元素的位置进行重新定位，如果没有父级元素把页面当做父级元素
         4.fixed 固定定位 把元素固定在页面的某个具体位置，不会随着页面的滚动发生变化
         5.sticky 粘性定位 相对定位+固定定位
 */

table{
    font-size: 30px;
    color: green;
}

p{
    color: cornflowerblue;
}

tr.odd{
    background: aqua;
}

tr.even{
    background: antiquewhite;
}

tr#but{
    background: gold;
}

p.first,#second{
    font-size: 40px;
    color: greenyellow;
}

p a{
    color: blue;
}

span a{
    color: brown;
}

/* 未访问的连接 */
a.h:link{
    color: red;
}

/* 已访问的连接 */
a.h:visited{
    color: green;
}

/* 鼠标悬停 */
a.h:hover{
    color: gold;
}
/* 已选择的连接 */
a.h:active{
    color: blue;
}


span.p{
    color: aqua;
}

span#s{
    color: darkseagreen;
    font-size: 50px;
}